<template>
  <el-dialog
    :title="dialog.title"
    :visible.sync="dialog.show"
    append-to-body
    width="800px"
    @close="handleClose"
  >

    <el-form v-show="checkPermission('pas:receipt:add') && hideFrom === false" ref="receiptForm" :model="form" :rules="rules">
      <el-row>
        <el-col :span="10">
          <el-form-item :label-width="formLabelWidth" prop="receiptDate" label="收款日期">
            <el-date-picker
              v-model="form.receiptDate"
              class="full-width-i"
              placeholder="选择日期时间"
              type="date"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item :label-width="formLabelWidth" prop="receiptAmount" label="收款金额">
            <el-input-number :max="99999999.99" :min="-99999999.99" :precision="2" :step="0.1" v-model="form.receiptAmount" :controls="false" class="full-width-i amount-number"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item :label-width="formLabelWidth" prop="receiptRemark" label="收款备注">
            <el-input :rows="2" v-model="form.receiptRemark" placeholder="请输入备注" type="textarea" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item :label-width="formLabelWidth">
        <el-button type="primary" @click="saveReceiptRecord()">添加收款记录</el-button>
        <el-button @click="restFrom('receiptForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="receiptRecordList">
      <el-table-column type="index" width="50" />
      <el-table-column label="收款日期" property="receiptDate" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.receiptDate===null? "--" :scope.row.receiptDate |moment("YYYY-MM-DD") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收款金额" property="receiptAmount" width="200">
        <template slot-scope="scope">
          <span>{{ '￥' + (scope.row.receiptAmount === null ? 0 : scope.row.receiptAmount) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收款备注" property="receiptRemark"/>
    </el-table>
  </el-dialog>
</template>
<style>
.amount-number input {
  text-align: left !important;
}
</style>
<script>
import { assemblesFromData } from '@/api/utils'
import { getUserInfo } from '@/api/login'
import { queryMallOrder } from '@/api/pas/mallOrder'
import { queryReceiptList, saveReceiptRecord } from '@/api/pas/receipt'
export default {
  props: {
    modalStaticData: {
      type: Object,
      default: () => {}
    },
    // 父组件调用时传进来的参数
    modalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialog: {
        title: '',
        show: true
      },
      search: {
        keyword: null,
        pageNumber: 0,
        pageSize: 10,
        orderId: null,
        receiptStartDate: null,
        receiptEndDate: null,
        receiptAmount: null,
        operatorId: null

      },
      rules: {
        receiptDate: [
          { required: true, message: '请选择收款日期', trigger: 'change' }
        ],
        receiptAmount: [
          { required: true, message: '请输入收款金额', trigger: 'blur' }
        ],

        receiptRemark: [
          { required: true, message: '请填写收款备注', trigger: 'blur' }
        ]
      },
      receiptRecordList: [],
      form: {
        orderId: null,
        receiptDate: null,
        receiptAmount: 0,
        receiptRemark: ''
      },
      formLabelWidth: '120px',
      mallOrder: null,
      hideFrom: false
    }
  },
  computed: {
    receiptAmount() {
      return this.form.receiptAmount
    }
  },
  watch: {
    receiptAmount(val, oldVal) {
      // this.$message({
      //   message: '收款金额',
      //   type: 'warning'
      // });
    }
  },
  created() {
    if (this.modalData) {
      this.search.orderId = this.modalData.mallOrderId
      this.getReceiptRecordList()
      this.getPermission()
      if (this.modalData.orderReceipts >= this.modalData.saleAmount) {
        this.hideFrom = true
      }
    } else {
      this.$emit('close')
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    getReceiptRecordList() {
      const self = this
      queryReceiptList(this.search).then(
        response => {
          if (response.data.status === 'success') {
            self.receiptRecordList = response.data.data.list
          } else {
            console.log('收款记录加载失败！')
          }
        }
      ).catch(error => {
        console.log(error)
      })
    },
    restFrom(formName) {
      const self = this
      self.$refs[formName].resetFields()
    },
    saveReceiptRecord() {
      const self = this
      self.form.orderId = this.modalData.mallOrderId
      var fromData = assemblesFromData(self.form)
      self.$refs['receiptForm'].validate((valid) => {
        if (valid) {
          saveReceiptRecord(fromData).then(
            response => {
              if (response.data.status === 'success') {
                self.getReceiptRecordList()
                self.getMallOrder()
                self.restFrom('receiptForm')
              } else {
                console.log('保存收款记录失败！')
              }
            }
          ).catch(error => {
            console.log(error)
          })
        } else {
          return false
        }
      })
    },
    getMallOrder() {
      const self = this
      const query = { mallOrderId: self.modalData.mallOrderId }
      queryMallOrder(query).then(
        response => {
          if (response.data.status === 'success') {
            self.mallOrder = response.data.data
            if (response.data.data.orderReceipts >= response.data.data.saleAmount) {
              self.hideFrom = true
            }
          } else {
            self.$message.error('查询工单信息失败')
          }
        }
      ).catch(error => {
        console.log(error)
        self.$message.error('查询工单信息失败')
      })
    },
    getPermission() {
      var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下

      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=') // 再次切割
        // 判断查找相对应的值
        if (arr2[0] === 'sidebarStatus') {
          this.userid = arr2[1]
        }
      }

      if (localStorage.getItem(this.userid)) {
        return
      }

      getUserInfo().then(response => {
        if (response.data.status === 'ok') {
          localStorage.setItem(
            this.userid,
            JSON.stringify(response.data.data.permissions)
          )
        }
      })
    },
    checkPermission(value) {
      if (value) {
        if (localStorage.getItem(this.userid) && localStorage.getItem(this.userid).indexOf(value) >= 0) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    }
  }
}
</script>

